import clsx from 'clsx';

import { TaskCardComments, TaskCardExecutor, SubTask, SubtaskCard } from '.'
import { TaskCardTags } from './TaskCardTags';
import { TaskCardSlider } from './TaskCardSlider';
import { TaskCardDate } from './TaskCardDate';
import { TaskCardCheckbox } from './TaskCardCheckbox';
import { FileSelector } from '../FileSelector/FileSelector';
import { NewSubTask } from '../NewTask';
import { AdvancedButton } from '../AdvancedButton/AdvancedButton';
import { ActionMenu } from '../ActionMenu/ActionMenu';
import { AdvancedButtonMap } from '../AdvancedButton/AdvancedButtonMap';
import { useTaskCard } from '@/hook/useTaskCard';
import { AlertAnswer } from '../Customs';
import { PrioritySelectActionMenu } from '../ActionMenu/PrioritySelectActionMenu';

interface Props {
  value?: string;
  openSheet: (bool: boolean) => void;
  cardData: Task;
  id?: string | undefined;
  className?: string;
}

export const TaskCard = (props: Props) => {
  const { openSheet, cardData, id, className } = props;

  const {
    data,
    showComments,
    setShowComments,
    isEdit,
    taskName,
    sendFiles,
    toggleShow,
    handleToggle,
    handleEditableTaskName,
    taskNameSave,
    enterKeyDown,
    taskCardOptions,
    actionInMenuWrappers,
    newTaskCard,
    setNewTaskCard,
    taskCardOptionsAdditional,
    removeTask,
    removeTaskCard,
    setRemoveTask,
    updateTaskPriority,
    updateTaskIsClosed,
  } = useTaskCard({ cardData });

  const fireColor = ['', '#F44336', '#FFB800', '#3D6BED']

  return (
    <div className='bg-[#ECF1F8] rounded-[32px] p-5'
      id={id}>
      <div
        onClick={(e) => {
          e.stopPropagation();
          openSheet(true);
        }}
        className={clsx(
          'w-[100%] cursor-pointer rounded-[16px] bg-[#E6EEF5] border-[#DEE7F0] border p-[20px] flex flex-col gap-[15px] group/taskCard',
          className,
          cardData.pinned && !cardData.is_closed ? 'shadow-[-4px_0_0_0_rgba(132,165,213,1)]' : 'shadow-[0_4px_4px_0_rgba(202,219,234,1)]',
          cardData.is_closed ? 'opacity-60' : ''
        )}
      >

        <div className='emptyClass flex w-[100%] gap-[10px]' >
          <TaskCardCheckbox taskData={cardData} onClick={updateTaskIsClosed} />
          <AdvancedButtonMap actions={taskCardOptions} />
          <ActionMenu wrapperActions={actionInMenuWrappers} >
            <AdvancedButton icon='EllipsesIcon' {...taskCardOptionsAdditional} />
          </ActionMenu>
        </div>
        <TaskCardSlider taskData={cardData} />
        <div className='flex flex-col w-full items-start gap-[5px]'>
          <TaskCardTags type='task' taskData={data} />
          <div className='group/taskName flex items-start w-full'  >
            <AdvancedButton
              icon='Edit'
              onClick={handleEditableTaskName}
              className='opacity-0 group-hover/taskName:opacity-100 group-hover/taskName:text-[--btn-color-hover] -ml-[20px]'
            />
            <h3 className={`grow text-[#384455] text-[18px] font-normal outline-none ${!isEdit || 'border border-slate-400 p-1'}`}
              ref={taskName}
              contentEditable={isEdit}
              onBlur={(e) => taskNameSave(e, data.id)}
              onKeyDown={(e) => enterKeyDown(e, data.id)}
              onClick={(e) => {
                if (isEdit) {
                  e.stopPropagation()
                }
              }}
            >{cardData.name}</h3>
          </div>
        </div>
        <div className='flex gap-2'>
          <div className='flex items-end gap-[10px]'>
            <TaskCardExecutor dark performers={data.performers} />
            <TaskCardDate taskData={cardData} />
            <PrioritySelectActionMenu value={Number(cardData.priority_id)} getValue={updateTaskPriority} >
              <AdvancedButton icon='Fire' iconColor={fireColor[Number(cardData.priority_id)]} onClick={e => e.stopPropagation()} />
            </PrioritySelectActionMenu>
          </div>
          <div className='ml-auto flex gap-[10px]'>
            <FileSelector setFiles={sendFiles} >
              <AdvancedButton icon='Files' variant={'base'} onClick={e => e.stopPropagation()} />
            </FileSelector>
            <AdvancedButton icon='Comments' iconCount={data.comments.count} iconNewCount={!!data.comments.new} variant={'base'} onClick={(e) => {
              e.stopPropagation()
              setShowComments(prev => !prev)
            }} />
          </div>
        </div>
        {showComments && <TaskCardComments comments={data.comments} taskId={data.id} />}
        {
          !!cardData.subtasks.length && <SubTask subtasks={cardData.subtasks} handleToggle={handleToggle} toggleShow={toggleShow} />
        }
      </div>
      <div className={cardData.is_closed ? 'opacity-60' : ''} >
        {
          toggleShow && <>
            {newTaskCard ? <div className='w-[95%] mt-3 ml-auto'> <NewSubTask parentId={cardData.id} setOpen={setNewTaskCard} columnId={cardData.column_id} /></div> : null}
            <div className=" divide-y divide-slate-200 flex items-end gap-2 flex-col mt-2" >
              {cardData.subtasks.map((subtask) => (
                <SubtaskCard key={subtask.id} task={subtask} />
              ))}
            </div>
          </>
        }
      </div>
      <AlertAnswer open={removeTask} cancel={() => setRemoveTask(false)} accept={removeTaskCard} text={`Вы действительно хотите удалить задачу ${cardData.name}?`} />
    </div>

  );
};
